<template>
  <div class="app-container">
    <div class="app-minwin">
      <div
        v-if="!contentData"
        class="card"
        v-for="(item, i) in this.patientList"
        :key="item.patientID"
      >
        <div class="giveanalarm">
          <div class="btn-pending">
            <el-tag type="danger" size="mini" effect="dark">待处理</el-tag>
            <!-- <el-button type="danger" round size="mini">待处理</el-button> -->
          </div>
          <div class="list-ul">
            <li>调度流水号：A20567829105</li>
            <p>来源：120指挥中心</p>
          </div>
          <div class="list-ul">
            <li>请求时间：{{ item.receiveNoticeTime}}</li>
            <p>发送人：120指挥中心操作人</p>
          </div>
          <div class="time-mu">
            <div class="text">患者已等待</div>
            <div class="time" :data-time="item.receiveNoticeTime"></div>
          </div>
        </div>
        <div class="patient">
          <div class="uli">
            患者姓名：
            <span>{{item.name}}</span>
          </div>
          <div class="uli">
            性别：
            <span>{{ item.sex == "0" ? "未知" : item.sex == "1" ? "男" : "女"}}</span>
          </div>
          <div class="uli">
            年龄：
            <span>{{item.age}}</span>
          </div>
          <div class="uli">
            身份证号码：
            <span>{{item.patientCard}}</span>
          </div>
          <div class="uli">
            电话：
            <span>{{item.phone}}</span>
          </div>
        </div>
        <div class="other">
          <div class="liu">
            主诉：
            <span>{{item.majorCase}}</span>
          </div>
          <div class="liu">
            上车地点：
            <span>{{item.patientLocal}}</span>
          </div>
          <div class="liu">
            目标医院：
            <span>{{item.hospital}}</span>
          </div>
        </div>
        <div class="btn-handle">
          <el-button type="primary" round size="small" @click.native="handleUpdate(item)">立即派车</el-button>
        </div>
      </div>

      <!-- 数据为空时显示页面 -->
      <div class="noblank" v-if="contentData">
        <div class="blankprompt-ico">
          <i class="el-icon-tickets"></i>
        </div>
        <div class="blankprompt-text">暂无未处理信息</div>
      </div>
      <!-- 添加或修改病员急救信息对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="90%" :before-close="handleDialogClose" append-to-body>
        <div class="top-ul-lis">
          <div class="p-text">调度流水号：A20567829105</div>
          <div class="p-text">来源：120指挥中心</div>
          <div class="p-text">请求时间：{{ form.receiveNoticeTime}}</div>
          <div class="p-text">发送人：120指挥中心操作人</div>
        </div>
        <div class="box">
          <el-row>
            <el-col :span="1.5">
              <div class="line">
                <div class="title">患者姓名:</div>
                <div class="active-value">{{ form.name}}</div>
              </div>
              <div class="line">
                <div class="title">性别:</div>
                <div class="active-value">{{ form.sex == "0" ? "未知" : form.sex == "1" ? "男" : "女"}}</div>
              </div>
              <div class="line">
                <div class="title">年龄:</div>
                <div class="active-value">{{ form.age}}</div>
              </div>
              <div class="line">
                <div class="title">身份证号码:</div>
                <div class="active-value">{{ form.patientCard}}</div>
              </div>
              <div class="line">
                <div class="title">电话:</div>
                <div class="active-value">{{ form.phone}}</div>
              </div>
              <div class="second-title">
                <div class="title">主诉:</div>
                <div class="active-value">{{ form.majorCase}}</div>
              </div>
              <div class="second-title">
                <div class="title">上车地点:</div>
                <div class="active-value">{{ form.patientLocal}}</div>
              </div>
              <div class="second-title">
                <div class="title">目标医院:</div>
                <div class="active-value">{{ form.hospital}}</div>
              </div>
              <div class="second-title">
                <div class="title">电话录音:</div>
                <div class="active-value">
                  <i class="el-icon-video-play video-play"></i>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="paicu-bau" style="overflow: hidden;">
          <div class="gird">
            <div class="tisp">急救车：</div>
            <el-alert v-if="noDataAmbulance" title="没有数据!" type="warning" :closable="false"></el-alert>
            <div class="tase-list" v-if="!noDataAmbulance">
              <div class="ul">
                <el-radio-group v-model="togleChckedList.car" @change="handelChangeCars">
                  <el-radio v-for="(item, i) in this.cars" :key="item.carID" :label="i">
                    <div class="lit">
                      {{item.vin}}
                      <span
                        :class="item.type == '0' ? 'green' : 'purple'"
                      >{{item.type == "0" ? "普" : "卒"}}</span>
                      <span class="equipment">车载设备</span>
                    </div>
                  </el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="gird">
            <div class="tisp" style="width:260px">随车司机：</div>
            <el-alert v-if="noDataDriver" title="没有数据!" type="warning" :closable="false"></el-alert>
            <div class="tase-list" style="width:260px" v-if="!noDataDriver">
              <div class="ul">
                <el-radio-group v-model="togleChckedList.driver" @change="handelChangeDriver">
                  <el-radio v-for="(item, i) in this.drivers" :key="item.driverID" :label="i">
                    <div class="lit">
                      <span class="name">{{item.name}}</span>
                      <span
                        class="default"
                      >{{ item.sex == "0" ? "未知" : item.sex == "1" ? "男" : "女"}}</span>
                      <span class="default">{{item.age}}</span>
                      <span class="default">{{item.phone}}</span>
                    </div>
                  </el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>

          <div class="gird">
            <div class="tisp" style="width:460px">随车班组：</div>
            <el-alert v-if="noDataOnboardteam" title="没有数据!" type="warning" :closable="false"></el-alert>
            <div class="tase-list" style="width:460px" v-if="!noDataOnboardteam">
              <div class="ul">
                <el-radio-group v-model="togleChckedList.class" @change="handelChangeClass">
                  <div v-for="(item, i) in this.classes" :key="item.classID" :label="i">
                    <el-radio :label="i">
                      <div class="redso">{{item.name}}</div>
                    </el-radio>
                    <div class="lit end">
                      <span class="name">{{item.bizDoctor.name}}</span>
                      <span
                        class="default"
                      >{{ item.bizDoctor.sex == "0" ? "未知" : item.bizDoctor.sex == "1" ? "男" : "女"}}</span>
                      <span class="default">{{item.bizDoctor.age}}</span>
                      <span class="default">{{item.bizDoctor.depart}}</span>
                      <span class="default">{{item.bizDoctor.title}}</span>
                      <!-- <span class="default">外科</span> -->
                      <span class="default">{{item.bizDoctor.phone}}</span>
                    </div>
                    <div class="lit end">
                      <span class="name">{{item.bizNurse.name}}</span>
                      <span
                        class="default"
                      >{{ item.bizNurse.sex == "0" ? "未知" : item.bizNurse.sex == "1" ? "男" : "女"}}</span>
                      <span class="default">{{item.bizNurse.age}}</span>
                      <span class="default">{{item.bizNurse.depart}}</span>
                      <span class="default">{{item.bizNurse.title}}</span>
                      <!-- <span class="default">外科</span> -->
                      <span class="default">{{item.bizNurse.phone}}</span>
                    </div>
                  </div>
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openAffirm" round>立即派车</el-button>
          <el-button @click="cancel" round>取 消</el-button>
        </div>
      </el-dialog>

      <!-- 调度指令确认 弹窗 -->
      <el-dialog title="调度指令确认" :visible.sync="instructions" width="70%"  append-to-body>
        <div class="top-ul-lis">
          <div class="p-text">调度流水号：A20567829105</div>
          <div class="p-text">来源：120指挥中心</div>
          <div class="p-text">请求时间：{{ form.receiveNoticeTime}}</div>
          <div class="p-text">发送人：120指挥中心操作人</div>
        </div>
        <div class="box">
          <el-row>
            <el-col :span="1.5">
              <div class="line">
                <div class="title">患者姓名:</div>
                <div class="active-value">{{ form.name}}</div>
              </div>
              <div class="line">
                <div class="title">性别:</div>
                <div class="active-value">{{ form.sex == "0" ? "未知" : form.sex == "1" ? "男" : "女"}}</div>
              </div>
              <div class="line">
                <div class="title">年龄:</div>
                <div class="active-value">{{ form.age}}</div>
              </div>
              <div class="line">
                <div class="title">身份证号码:</div>
                <div class="active-value">{{ form.patientCard}}</div>
              </div>
              <div class="line">
                <div class="title">电话:</div>
                <div class="active-value">{{ form.phone}}</div>
              </div>
              <div class="second-title">
                <div class="title">主诉:</div>
                <div class="active-value">{{ form.majorCase}}</div>
              </div>
              <div class="second-title">
                <div class="title">上车地点:</div>
                <div class="active-value">{{ form.patientLocal}}</div>
              </div>
              <div class="second-title">
                <div class="title">目标医院:</div>
                <div class="active-value">{{ form.hospital}}</div>
              </div>
<!--              <div class="second-title">
                <div class="title">电话录音:</div>
                <div class="active-value">
                  <i class="el-icon-video-play video-play"></i>
                </div>
              </div> -->
            </el-col>
          </el-row>
        </div>

        <div class="paicu-bak">
          <div class="ambulance">
            <div class="tisp">急救车：</div>
            <div class="lit">
              {{this.togleChckedList.carinfo.vin}}
              <span
                :class="this.togleChckedList.carinfo.type == '0' ? 'green' : 'purple'"
              >{{this.togleChckedList.carinfo.type == "0" ? "普" : "卒"}}</span>
              <span class="equipment">车载设备</span>
            </div>
          </div>

          <div class="ambulance">
            <div class="tisp">随车司机：</div>
            <div class="lit">
              <span class="name">{{this.togleChckedList.driverinfo.name}}</span>
              <span
                class="default"
              >{{ this.togleChckedList.driverinfo.sex == "0" ? "未知" : this.togleChckedList.driverinfo.sex == "1" ? "男" : "女"}}</span>
              <span class="default">{{this.togleChckedList.driverinfo.age}}</span>
              <span class="default">{{this.togleChckedList.driverinfo.phone}}</span>
            </div>
          </div>

          <div class="ambulance">
            <div class="tisp">随车班组：</div>
            <div class="redso">{{this.togleChckedList.classinfo.name}}</div>
            <div class="lit end">
              <span class="name">{{this.togleChckedList.classinfo.bizDoctor.name}}</span>
              <span
                class="default"
              >{{ this.togleChckedList.classinfo.bizDoctor.sex == "0" ? "未知" : this.togleChckedList.classinfo.bizDoctor.sex == "1" ? "男" : "女"}}</span>
              <span class="default">{{this.togleChckedList.classinfo.bizDoctor.age}}</span>
              <span class="default">{{this.togleChckedList.classinfo.bizDoctor.depart}}</span>
              <span class="default">{{this.togleChckedList.classinfo.bizDoctor.title}}</span>
              <!-- <span class="default">外科</span> -->
              <span class="default">{{this.togleChckedList.classinfo.bizDoctor.phone}}</span>
            </div>
            <div class="lit end">
              <span class="name">{{this.togleChckedList.classinfo.bizNurse.name}}</span>
              <span
                class="default"
              >{{ this.togleChckedList.classinfo.bizNurse.sex == "0" ? "未知" : this.togleChckedList.classinfo.bizNurse.sex == "1" ? "男" : "女"}}</span>
              <span class="default">{{this.togleChckedList.classinfo.bizNurse.age}}</span>
              <span class="default">{{this.togleChckedList.classinfo.bizNurse.depart}}</span>
              <span class="default">{{this.togleChckedList.classinfo.bizNurse.title}}</span>
              <!-- <span class="default">外科</span> -->
              <span class="default">{{this.togleChckedList.classinfo.bizNurse.phone}}</span>
            </div>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel" round>取 消</el-button>
          <el-button type="success" @click="submitForm" round>确定派车</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  delPatient,
  doDispatch,
  exportPatient,
  getPatient,
  listPatient
  // updatePatient
} from "@/api/biz/patient";
import { listClass } from "@/api/biz/class";
import { listDriver } from "@/api/biz/driver";
import { listCars } from "@/api/biz/car";

export default {
  name: "Patient",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 病员急救信息表格数据
      patientList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //调度指令确认 弹窗
      instructions: false,
      // 性别字典
      sexOptions: [],
      // 弹窗选中数据
      togleChckedList: {
        car: undefined,
        class: undefined,
        driver: undefined,
        carinfo: {
          vim: undefined,
          name: undefined
        },
        classinfo: {
          name: undefined,
          bizDoctor: {
            name: undefined
          },
          bizNurse: {
            name: undefined
          }
        },
        driverinfo: {
          name: undefined
        }
      },
      cars: [],
      drivers: [],
      classes: [],
      // 是否处理字典
      statusOptions: [],
      // 车辆类型字典
      phoneTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        phone: undefined,
        time: undefined,
        phoneType: undefined,
        hospital: undefined,
        ids: undefined
      },
      // 查询车辆
      queryCar: {
        pageNum: 1,
        pageSize: 10,
        status: 0
      },
      // 查询司机
      queryDriver: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
        onDutyStatus: 1
      },
      // 查询班组
      queryClass: {
        pageNum: 1,
        pageSize: 10,
        carStatus: 0,
        status: 0
      },
      // 数据为空 空白页面显示
      contentData: false,
      // 无数据提示 司机
      noDataDriver: false,
      // 无数据提示 急救车
      noDataAmbulance: false,
      // 无数据提示 随车班组
      noDataOnboardteam: false,

      // 调度派车form
      myform: {},
      //  选中属性
      checkformList: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        driverID: [
          {
            required: true,
            message: "司机不能为空",
            trigger: "blur"
          }
        ],
        classID: [
          {
            required: true,
            message: "班组不能为空",
            trigger: "blur"
          }
        ],
        carID: [
          {
            required: true,
            message: "车辆不能为空",
            trigger: "blur"
          }
        ]
      },
      checkList: []
    };
  },
  created() {
    this.getList();
    this.getDicts("sys_user_sex").then(response => {
      this.sexOptions = response.data;
    });
    this.getDicts("patient_msg_deal").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("car_type").then(response => {
      this.phoneTypeOptions = response.data;
    });
  },
  methods: {
    /** 查询病员急救信息列表 */
    getList() {
      this.loading = true;
      listPatient(this.queryParams).then(response => {
        for (let i = 0; i < response.rows.length; i++) {
          let wall = timeConversion(response.rows[i].receiveNoticeTime);
          response.rows[i].waitingtime = wall;
        }
        this.patientList = response.rows;
        this.total = response.total;
        this.loading = false;
        if (response.rows.length === 0) {
          this.contentData = true;
        }
      });
    },
    // 获取医生列表
    getClasses() {
      listClass(this.queryClass).then(response => {
        this.classes = response.rows;
        if (response.rows.length === 0) {
          this.noDataOnboardteam = true;
        }
      });
    },
    // 获取司机列表
    getDrivers() {
      listDriver(this.queryDriver).then(response => {
        this.drivers = response.rows;
        if (response.rows.length === 0) {
          this.noDataDriver = true;
        }
      });
    },
    // 获取车辆列表
    getCars() {
      listCars(this.queryCar).then(response => {
        this.cars = response.rows;
        if (response.rows.length === 0) {
          this.noDataAmbulance = true;
        }
      });
    },

    // 性别字典翻译
    sexFormat(row, column) {
      return this.selectDictLabel(this.sexOptions, row.sex);
    },
    // 是否处理字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 车辆类型字典翻译
    phoneTypeFormat(row, column) {
      return this.selectDictLabel(this.phoneTypeOptions, row.phoneType);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.instructions = false;
      this.reset();
      this.togleChckedList.car = undefined
      this.togleChckedList.class = undefined
      this.togleChckedList.driver = undefined
    },
    // 表单重置
    reset() {
      this.form = {
        patientId: undefined,
        trans120: undefined,
        name: undefined,
        phone: undefined,
        remark: undefined,
        sex: undefined,
        age: undefined,
        address: undefined,
        callPhone: undefined,
        time: undefined,
        patientLocal: undefined,
        patientRecords: undefined,
        receiveNoticeTime: undefined,
        status: undefined,
        patientCard: undefined,
        phoneType: undefined,
        uid: undefined,
        majorCase: undefined,
        hospital: undefined,
        checkResult: undefined,
        firstTreat: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.patientId);
      if (this.ids.length != 0) {
        this.queryParams.ids = this.ids.join(",");
      } else {
        this.queryParams.ids = undefined;
      }
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    handelChangeClass() {
      this.myform.classID = this.classes[this.togleChckedList.class].classID;
      this.togleChckedList.classinfo = this.classes[this.togleChckedList.class];
    },
    // 选中车辆
    handelChangeCars() {
      console.log(this.myform)
      this.myform.carID = this.cars[this.togleChckedList.car].carID;
      this.togleChckedList.carinfo = this.cars[this.togleChckedList.car];
    },
    // 选中司机
    handelChangeDriver() {
      this.myform.driverID = this.drivers[this.togleChckedList.driver].driverID;
      this.togleChckedList.driverinfo = this.drivers[
        this.togleChckedList.driver
      ];
    },
    //关闭弹窗
    handleDialogClose() {
      // this.isShow = true;
      this.open = false;
      this.togleChckedList.car = undefined
      this.togleChckedList.class = undefined
      this.togleChckedList.driver = undefined
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加病员急救信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const patientId = row.patientId || this.ids;
      getPatient(patientId).then(response => {
        this.form = response.data;
        // this.open = true;
        // this.title = "调度派车";
      });
      this.myform = {};
      // const patientId = row.patientId || this.ids
      this.myform.patientID =
        patientId instanceof Array ? patientId[0] : patientId;
      console.log(this.myform.patientID);
      this.open = true;
      this.title = "调度指令";
      this.getClasses();
      this.getDrivers();
      this.getCars();
    },
    /** 提交按钮 */
    submitForm: function() {
      console.log(this.myform);
      if (this.myform.carID == undefined) {
        this.msgError("车辆不能为空");
        return;
      }
      if (this.myform.classID == undefined) {
        this.msgError("班组不能为空");
        return;
      }
      if (this.myform.driverID == undefined) {
        this.msgError("司机不能为空");
        return;
      }
      doDispatch(this.myform).then(response => {
        if (response.code === 200) {
          this.msgSuccess("派车成功");
          this.open = false;
          this.instructions = false;
          this.getList();
        } else {
          this.msgError(response.msg);
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const patientIds = row.patientId || this.ids;
      this.$confirm(
        '是否确认删除病员急救信息编号为"' + patientIds + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(function() {
          return delPatient(patientIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有病员急救信息数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportPatient(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        })
        .catch(function() {});
    },
    // 打开确认派车页面
    openAffirm() {
      console.log(this.myform)
      if (this.myform.carID == undefined) {
        this.msgError("未选择急救车");
        return;
      }
      if (this.myform.driverID == undefined) {
        this.msgError("未选择司机");
        return;
      }
      if (this.myform.classID == undefined) {
        this.msgError("未选择班组");
        return;
      }
      this.instructions = true;
    }
  }
};
//等待时间心跳更新
import $ from "jquery";
$(document).ready(function() {
  let myVarTime = setInterval(function() {
    let total = $('.time-mu .time').length
    for (let i = 0; i < total; i++) {
      let wall = timeConversion($('.time-mu .time').eq(i).data('time'));
      $('.time-mu .time').eq(i).html(wall)
    }
  }, 1000);
});
// 等待时间格式化处理
function timeConversion(strtime) {
  //将传入时间格式化
  let date = new Date(strtime.replace(/-/g, "/"));
  let time = date.getTime() / 1000;
  let timestamp = Date.parse(new Date()) / 1000; //当前时间戳秒
  let waitdiff = timestamp - time;
  return secondToDate(waitdiff);
}
//秒转化成 时分秒
function secondToDate(result) {
  var h = Math.floor(result / 3600);
  var m = Math.floor((result / 60) % 60);
  if(m < 10){
    m = "0" + m;
  }
  var s = Math.floor(result % 60);
  if(s < 10){
    s = "0" + s;
  }
  let html = "";
  if(h>0){
     html =  h + "<span style='font-size: 12px;'>时</span>" + m + "<span style='font-size: 12px;'>分</span>" + s + "<span style='font-size: 12px;'>秒</span>";
  } else if(m !='00'){
     html =  m + "<span style='font-size: 12px;'>分</span>" + s + "<span style='font-size: 12px;'>秒</span>";
  } else {
     html =  s + "<span style='font-size: 12px;'>秒</span>";
  }
  // return result = h + "小时" + m + "分钟" + s + "秒";
  // return (result = h + "<span style='font-size: 12px;'>时</span>" + m + "<span style='font-size: 12px;'>分</span>" + s + "<span style='font-size: 12px;'>秒</span>")
  return (result = html)
}
</script>
<style>
.el-dialog {
  margin-bottom: 40px;
}
.app-main {
  overflow: auto !important;
}
</style>
<style scoped="scoped">
.title {
  float: left;
  margin-left: 25px;
  font-weight: 1000;
  padding-bottom: 1.25rem;
  padding-top: 1.25rem;
}

.line {
  float: left;
}

.active-value {
  float: left;
  color: #1890ff;
  margin-left: 15px;
  padding-top: 1.25rem;
}

.second-title {
  clear: left;
}

.second-title .title {
  padding-top: 0.5rem;
}

.second-title .active-value {
  padding-top: 0.5rem;
}

.second-title .active-value .video-play {
  color: #333;
  font-size: 22px;
  margin-top: -3px;
}

.box {
  background-color: #f9f9f9;
  margin-bottom: 2rem;
}
.app-minwin {
  min-width: 1300px;
  overflow: auto;
}
#app .sidebar-container {
  overflow: auto;
}

.app-main {
  background: rgba(239, 241, 244, 1) !important;
}

.app-container {
  /* overflow: hidden; */
  background: rgba(239, 241, 244, 1);
}

.el-radio {
  margin-right: 0;
  display: flex;
}
/* 父容器设置弹性盒子,可自动让子元素横向排序 */

.card {
  background: #fff;
  float: left;
  width: 49%;
  /* min-width: 630px; */
  margin-right: 2%;
  margin-bottom: 15px;
}

.card:nth-child(even) {
  margin-right: 0%;
}

.card .giveanalarm {
  float: left;
  width: 100%;
  background: rgba(255, 251, 233, 1);
  padding: 10px 0px;
}

.card .giveanalarm .btn-pending {
  /* float: left; */
  width: auto;
  margin: 10px 0 0 10px;
  position: absolute;
}

.card .giveanalarm .list-ul {
  float: left;
  width: 210px;
  margin-left: 55px;
}
.card .giveanalarm .list-ul:nth-child(3) {
  margin-left: 0px;
}

.card .giveanalarm .list-ul li {
  float: left;
  width: 100%;
  list-style: none;
  font-size: 14px;
  color: #333333;
  margin: 5px 0 0 15px;
}

.card .giveanalarm .list-ul p {
  float: left;
  width: 100%;
  list-style: none;
  font-size: 14px;
  color: #888888;
  margin: 10px 0 5px 15px;
}

.card .giveanalarm .time-mu {
  float: right;
  color: #fd6666;
  padding-right: 15px;
  text-align: right;
}

.card .giveanalarm .time-mu .text {
  font-size: 12px;
  margin-top: 5px;
}

.card .giveanalarm .time-mu .time {
  font-size: 28px;
  margin-top: 5px;
}

.card .patient {
  float: left;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
}

.card .patient .uli {
  float: left;
  width: auto;
  font-size: 14px;
  margin-right: 35px;
  margin-top: 10px;
}

.card .patient .uli:last-child {
  margin-right: 0px;
}

.card .patient .uli span {
  color: #3e95f0;
  padding: 0 5px;
}

.card .other {
  float: left;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  margin-top: 10px;
}

.card .other .liu {
  /* float: left; */
  margin-bottom: 20px;
}

.card .other .liu span {
  color: #3e95f0;
  padding: 0 5px;
}

.card .btn-handle {
  float: right;
  margin: -60px 20px 0 0;
}

/* 调度派车弹窗 */
.top-ul-lis {
  width: 100%;
  margin: -10px 0 30px 0;
}

.top-ul-lis .p-text {
  float: left;
  font-size: 14px;
  color: #888888;
  margin-right: 50px;
}

.paicu-bau {
  float: left;
  width: 100%;
  margin-top: -10px;
  margin-bottom: 30px;
}

.paicu-bau .gird {
  float: left;
  margin-right: 40px;
}

.paicu-bau .gird:last-child {
  margin-right: 0px;
}

.paicu-bau .gird .tisp {
  width: 235px;
  font-size: 14px;
  color: #333333;
}

.paicu-bau .gird .tase-list {
  width: 235px;
  height: 232px;
  background: rgba(248, 248, 248, 1);
  overflow: scroll;
  margin-top: 10px;
  padding: 10px 5px;
}

.paicu-bau .gird .tase-list .ul {
}

.paicu-bau .gird .tase-list .ul .el-radio {
  padding: 5px 10px;
}

.paicu-bau .gird .tase-list .ul .tib {
  font-size: 13px;
  color: #333;
  padding-bottom: 5px;
}

.paicu-bau .gird .tase-list .ul .lit {
  font-size: 13px;
  color: #333;
}

.paicu-bau .gird .tase-list .ul .end {
  margin-top: 2px;
  margin-bottom: 10px;
  margin-left: 35px;
}

.paicu-bau .gird .tase-list .ul .redso {
  font-size: 13px;
  color: #666;
}

.paicu-bau .gird .tase-list .ul .lit span {
}

.paicu-bau .gird .tase-list .ul .lit span.green {
  color: #0dbe09;
  padding: 0 10px;
}

.paicu-bau .gird .tase-list .ul .lit span.purple {
  color: #661dfb;
  padding: 0 10px;
}

.paicu-bau .gird .tase-list .ul .lit span.name {
  color: #00b6cc;
}

.paicu-bau .gird .tase-list .ul .lit span.default {
  margin-left: 10px;
}

.paicu-bau .gird .tase-list .ul .lit span.equipment {
  color: #00b6cc;
  /* padding:0 10px */
}
.el-alert {
  margin-top: 10px;
}
.noblank {
  padding-top: 15%;
}
.blankprompt-ico {
  width: 100%;
  text-align: center;
}
.blankprompt-ico i {
  color: #c9c9c9;
  font-size: 120px;
}
.blankprompt-text {
  width: 100%;
  color: #c9c9c9;
  text-align: center;
  font-size: 16px;
  margin-top: 20px;
}

.paicu-bak {
  float: left;
  width: 100%;
  margin-top: -10px;
  margin-bottom: 30px;
}
.paicu-bak .ambulance {
  float: left;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
}
.paicu-bak .ambulance .tisp {
  font-size: 14px;
  color: #333333;
  float: left;
}
.paicu-bak .ambulance .lit {
  font-size: 14px;
  color: #333;
}

.paicu-bak .ambulance .end {
  margin-top: 10px;
  margin-left: 70px;
}

.paicu-bak .ambulance .redso {
  font-size: 14px;
  color: #333;
}

.paicu-bak .ambulance .lit span {
}

.paicu-bak .ambulance .lit span.green {
  color: #0dbe09;
  padding: 0 10px;
}

.paicu-bak .ambulance .lit span.purple {
  color: #661dfb;
  padding: 0 10px;
}

.paicu-bak .ambulance .lit span.name {
  color: #00b6cc;
}

.paicu-bak .ambulance .lit span.default {
  margin-left: 10px;
}

.paicu-bak .ambulance .lit span.equipment {
  color: #00b6cc;
  /* padding:0 10px */
}
</style>
